<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="stylesheet" href="/stylesheets/bootstrap.css" />
  </head>
  <body>
  <%- include header %>
    <header class="movie-header" style="background-image: url(../images/movie-banner.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <h3 class="h3">电影资讯</h3>
                    <form method="get" action="./movie/search" class="search"><input class="input" name="search" type="search" /><button type="submit" class="glyphicon glyphicon-search"></button></form>
                </div>
            </div>
        </div>
    </header>

	 <div class="row" id="movie">
	 <% body.forEach(function(item,idx){ %>
	  <div class="col-sm-6 col-md-3 center">
	    <div class="thumbnail">
	      <img class="box" src="/images/movie-loading1.gif" data-original="<%= item.img %>" id="" />
	      <div class="caption">
	        <h4 class="h4"><%- item.title %></h4>
	        <p><a href="" class="btn btn-primary a" role="button">查看详情</a></p>
	      </div>
	    </div>
	  </div>
	  <% }) %>
	</div>


    <%- include footer %>
    <script src="/javascripts/jquery-1.11.3.js"></script>
    <script src="/javascripts/jquery.lazyload.js"></script>
    <script src="/javascripts/bootstrap.js"></script>
    <script type="text/javascript" charset="utf-8">
      $(function() {
        $("img.box").lazyload({effect: "fadeIn",container:$('#movie')});
      });
    </script>
  </body>
</html>
